<template>
  <div class="login">
    <div class="left">
      <img src="@/assets/svg/login.svg">
    </div>
    <div class="right">
      <div class="login-form">
        <div class="title">您好！欢迎使用协同作业管理平台</div>
        <div class="line"></div>
        <el-form :model="form">
          <el-form-item>
            <el-input v-model="form.username" prefix-icon="el-icon-user" placeholder="请输入用户名" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="form.password" show-password prefix-icon="el-icon-lock" placeholder="请输入密码" clearable @keyup.enter="handleClick"></el-input>
          </el-form-item>
          <el-form-item>
            <button @click="handleClick">登 录</button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LoginIndex',
  data () {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    async handleClick (e) {
      e.preventDefault()
      await this.$store.dispatch('user/login', this.form)
      this.$router.push(this.$route.query.redirect || '/').catch(() => {})
    }
  }
}
</script>

<style lang="less" scoped>
.login {
  height: 100%;
  min-width: 1200px;
  background-image: linear-gradient(#3802b1, #2885f1);
  display: flex;
  justify-content: space-around;
  align-items: center;
  .left {
    img{
      width: 700px;
      height: 750px;
    }
  }
  .right{
    .title{
      font-size: 24px;
    }
    .line{
      margin-top: 6px;
      width: 4em;
      height: 4px;
      border-radius: 2px;
      background-color: #06a4ff;
      margin-bottom: 20px;
    }
    .login-form{
      box-sizing: border-box;
      padding: 60px 50px 80px 50px;
      background-color: #fff;
      border-radius: 16px;
      button{
        width: 100%;
        outline: none;
        height: 40px;
        line-height: 40px;
        border-radius: 20px;
        border:none;
        cursor: pointer;
        background-image: linear-gradient(to right, #078df9, #4a36f7);
        color: #fff;
        font-size: 16px;
      }
    }
  }
}
</style>
